<template>
  <v-md-editor
    v-model="text"
    height="560px"
    :disabled-menus="[]"
    @upload-image="handleUploadImage"
  />
</template>
<script setup lang="ts">
//https://ckang1229.gitee.io/vue-markdown-editor/zh/api.html#props
import { ref, watch } from "vue";
import { http } from "@/utils/http";

// codemirror 编辑器的相关资源
// import Codemirror from "codemirror";
// // mode
// import "codemirror/mode/markdown/markdown";
// import "codemirror/mode/javascript/javascript";
// import "codemirror/mode/css/css";
// import "codemirror/mode/htmlmixed/htmlmixed";
// import "codemirror/mode/vue/vue";
// // edit
// import "codemirror/addon/edit/closebrackets";
// import "codemirror/addon/edit/closetag";
// import "codemirror/addon/edit/matchbrackets";
// // placeholder
// import "codemirror/addon/display/placeholder";
// // active-line
// import "codemirror/addon/selection/active-line";
// // scrollbar
// import "codemirror/addon/scroll/simplescrollbars";
// import "codemirror/addon/scroll/simplescrollbars.css";
// // style
// import "codemirror/lib/codemirror.css";

// import VMdEditor from "@kangc/v-md-editor";
// import "@kangc/v-md-editor/lib/plugins/tip/tip.css";
// import createTipPlugin from "@kangc/v-md-editor/lib/plugins/tip/index";

// // VMdEditor.Codemirror = Codemirror;
// VMdEditor.use(githubTheme, {
//   Hljs: hljs
// });
// VMdEditor.use(createTipPlugin());

export interface Props {
  modelValue: string;
}
const pops = defineProps<Props>();
const text = ref("");
const emit = defineEmits(["update:modelValue"]);
watch(
  () => {
    return text.value;
  },
  data => {
    emit("update:modelValue", data);
  }
);
watch(
  () => {
    return pops.modelValue;
  },
  data => {
    text.value = data;
  }
);
const handleUploadImage = async (_event, insertImage, files) => {
  // 拿到 files 之后上传到文件服务器，然后向编辑框中插入对应的内容
  console.log(files);
  const param = new FormData(); // 创建form对象
  //注意files是对应后台的参数名哦
  param.append("files", files[0]);
  const imgUrl = await http.request({
    url: "/api/common/upload/image",
    method: "post",
    headers: { "Content-Type": "multipart/form-data" },
    data: param
  });
  // 此处只做示例
  insertImage({
    url: imgUrl,
    desc: "image"
    // width: 'auto',
    // height: 'auto',
  });
};
</script>
